<template>
	<u-popup :show="show" @close="close" mode="center">
	    <view class="code-popup">
			<view class="header flex">
				<text>{{title}}</text>
				<u-icon @click="close" color="#333333" size="14" name="close"></u-icon>
			</view>
			<view class="tips">
				点击获取验证码，将发送验证码到{{username|filterPhoneNumber}}请注意
				查收!
			</view>
	        <view class="cont flex">
				<u-input 
				placeholder="验证码" 
				maxlength="4"
				 @input="inputValue"
				:value="value"></u-input>
				<view class="code">
					<u-code
						ref="uCode"
						@change="codeChange"
						seconds="60"
						changeText="X秒"
					></u-code>
					<u-button
						:disabled="!username"
						@tap="getCode"
						:text="tips"
						type="success"
					></u-button>
				</view>
			</view>
			<view class="submit">
				<u-button :disabled="disabled" :loading="loading" @click="submit">{{btnText}}</u-button>
			</view>
	    </view>
	</u-popup>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	export default {
		name:"codePopup",
		mixins:[mixin],
		props:{
			title:'',
			btnText:'',
			username:'',
			show:{
				type:Boolean,
				default:false
			},
			loading:{
				tyep:Boolean,
				default:false
			},
			value:{
				type:[String,Number],
				default:()=>{
					return ''
				}
			}
		},
		data() {
			return {
				tips:'',
			};
		},
		computed:{
			disabled(){
				if(this.value){
					return false
				}else{
					return true
				}
			}
		},
		methods:{
			inputValue(e){
				this.$emit('input',e)
			},
			close(){
				this.$emit('show',false)
				this.$emit('input','')
				this.$refs.uCode.reset()
			},
			codeChange(text) {
			    this.tips = text;
			},
			getCode() {
				if(this.username){
					if (this.$refs.uCode.canGetCode) {
						this.shayuSms(this.username)
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('手机号码不正确');
				}
			},
			submit(){
				this.$emit('submit',true)
			}
		},
		filters:{
			filterPhoneNumber(phoneNumber) {
				let reg = /^1[3456789]{1}\d{9}$/	
				if (reg.test(phoneNumber)) {
					phoneNumber = phoneNumber.toString()	
					return phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
				} else {
					return '[手机号码格式不正确]'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content{
		background-color: transparent;
	}
	.code-popup{
		width: calc(100vw - 100rpx);
		padding: 40rpx 28rpx;
		background: #f8f8f8;
		border-radius: 27rpx;
		box-sizing: border-box;
		.flex{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.header{
			font-size: 29rpx;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #bbbbbb;
		}
		.tips{
			margin-top: 55rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 33rpx;
		}
		.cont{
			margin-top: 60rpx;
			.u-input{
				height: 82rpx;
				background: #f8f8f8;
				border: 2rpx solid #bbbbbb!important;
				border-radius: 9rpx;
				padding-top: 0!important;
				padding-bottom: 0!important;;
				::v-deep input{
					text-align: center !important;
					color: #333333!important;
				}
			}
			.code{
				margin-left: 57rpx
				::v-deep button{
					width: 287rpx;
					height: 82rpx;
					background: linear-gradient(93deg, #866a32 0%, #312306 99%);
					border-radius: 9rpx;
					border: 0;
				}
			}
		}
		.submit{
			margin-top: 44rpx;
			::v-deep button{
				color: #333333;
				background: linear-gradient(89deg, #F2E0BC 0%, #F2E0BC 100%);
				border: 0;
				height: 82rpx;
				border-radius: 9rpx;
				&.u-button--disabled{
					opacity: 1;
					color: #ffffff;
					background: #9E9E9E;
				}
			}
		}
	}
</style>
